import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Card, Row, Col, Tree, Tag, Table, Pagination } from "antd";
import { getTree } from "@/api/hosp/department";
import { getScheduleRule, findScheduleList } from "@/api/hosp/schedule";

import "./index.less";

function HospitalSchedule() {
	const params = useParams();
	const [department, setDepartment] = useState<any>([]);
	const [scheduleRule, setScheduleRule] = useState<any>({
		baseMap: {},
		bookingScheduleList: [],
	});
	const [scheduleList, setScheduleList] = useState<any>([]);
	const [expandedKeys, setExpandedKeys] = useState<any>([]);
	const [depcode, setDepcode] = useState<any>("");
	const [depname, setDepname] = useState<any>("");
	const [workDate, setWorkDate] = useState<any>("");

	const [page, setPage] = useState(1);
	const [limit, setLimit] = useState(5);
	const [total, setTotal] = useState(0);

	const getDepartment = async () => {
		const data = await getTree(params.hoscode as string);
		setDepartment(data);

		setExpandedKeys(
			data.map((item: any) => {
				return item.depcode;
			})
		);

		setDepname(data[0].children[0].depname);
		setDepcode(data[0].children[0].depcode);

		return data[0].children[0].depcode;
	};

	const getSchedule = async (depcode: string, page: number, limit: number) => {
		const data = await getScheduleRule(
			page,
			limit,
			params.hoscode as string,
			depcode
		);
		setScheduleRule(data);
		setTotal(data.total);
		return data.bookingScheduleList[0]
			? data.bookingScheduleList[0].workDate
			: "";
	};

	const findSchedule = async (depcode: string, workDate: string) => {
		const data = await findScheduleList(
			params.hoscode as string,
			depcode,
			workDate
		);
		setScheduleList(data);
	};

	useEffect(() => {
		const fetchData = async () => {
			const depcode = await getDepartment();
			const workDate = await getSchedule(depcode, page, limit);
			setWorkDate(workDate);
			await findSchedule(depcode, workDate);
		};

		fetchData();
	}, []);

	const handleSelect = async (selectedKeys: any, e: any) => {
		setDepname(e.node.depname);
		setDepcode(selectedKeys[0]);
		setWorkDate("");
		const depcode = selectedKeys[0];
		const workDate = await getSchedule(depcode, page, limit);
		await findSchedule(depcode, workDate);
		setWorkDate(workDate);
	};

	const handleTagClick = (workDate: string) => {
		return async () => {
			await findSchedule(depcode, workDate);
			setWorkDate(workDate);
		};
	};

	const handleChange = (page: number, limit: number) => {
		setPage(page);
		setLimit(limit);
		getSchedule(depcode, page, limit);
	};

	const columns = [
		{
			title: "序号",
			key: "index",
			render: (_a: any, _b: any, index: number) => {
				return index + 1;
			},
		},
		{
			title: "职称",
			dataIndex: "title",
			key: "title",
		},
		{ title: "号源时间", dataIndex: "workDate", key: "workDate" },

		{
			title: "可预约数",
			dataIndex: "availableNumber",
			key: "availableNumber",
		},
		{
			title: "剩余预约数",
			dataIndex: "reservedNumber",
			key: "reservedNumber",
		},
		{
			title: "挂号费(元)",
			dataIndex: "amount",
			key: "amount",
		},
		{
			title: "擅长技能",
			dataIndex: "skill",
			key: "skill",
		},
	];

	return (
		<Card>
			<p>
				选择：{scheduleRule.baseMap.hosname} / {depname} / {workDate}
			</p>
			<Row gutter={20}>
				<Col span={4}>
					<div className="hospital-department">
						<Tree
							treeData={department}
							height={600}
							expandedKeys={expandedKeys}
							fieldNames={{
								title: "depname",
								key: "depcode",
							}}
							onSelect={handleSelect}
						/>
					</div>
				</Col>
				<Col span={20}>
					{scheduleRule.bookingScheduleList.map((item: any, index: number) => {
						return (
							<Tag
								key={index}
								style={{ marginBottom: 10, cursor: "pointer" }}
								color={item.workDate === workDate ? "blue" : ""}
								onClick={handleTagClick(item.workDate)}
							>
								<div>
									{item.workDate} {item.dayOfWeek}
								</div>
								<div>
									{item.availableNumber} / {item.reservedNumber}
								</div>
							</Tag>
						);
					})}

					<Pagination
						showSizeChanger
						onChange={handleChange}
						current={page}
						pageSize={limit}
						total={total}
						pageSizeOptions={[5, 10, 15, 20]}
					/>

					<Table
						style={{ marginTop: 10 }}
						columns={columns}
						dataSource={scheduleList}
						bordered
						rowKey="id"
						pagination={false}
					/>
				</Col>
			</Row>
		</Card>
	);
}

export default HospitalSchedule;
